<template>
	<view :style="{height:PhoneInfo.windowHeight + 'px',width:PhoneInfo.windowWidth + 'px'}">
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<u-toast ref="uToast"></u-toast>
		<view class="gross">
			<uni-swiper-dot>
				<swiper class="swiper-box">
					<swiper-item>
						<view class="swiper-echarts">
							<cover-view class="coverview"></cover-view>
							<uni-ec-canvas class="uni-canvas" force-use-old-canvas="true" id="uni-ec-canvas"
								ref="EQhealth" canvas-id="uni-ec-canvas" :ec="ec">
							</uni-ec-canvas>
						</view>
						<view class="swiper-text">
							<view class="swipertitle">设备健康状态</view>
							<view class="swiperneiron">
								<view class="swiperview">
									<view class="text ydzero">正常设备:</view>
									<view class="number zero">{{EQhealthoption.series[0].data[0].value}}</view>
									<view class="text">台</view>
								</view>
								<view class="swiperview">
									<view class="text ydone">一级报警:</view>
									<view class="number one">{{EQhealthoption.series[0].data[1].value}}</view>
									<view class="text">台</view>
								</view>
								<view class="swiperview">
									<view class="text ydtwo">二级报警:</view>
									<view class="number two">{{EQhealthoption.series[0].data[2].value}}</view>
									<view class="text">台</view>
								</view>
								<view class="swiperview">
									<view class="text ydthree">三级报警:</view>
									<view class="number three">{{EQhealthoption.series[0].data[3].value}}</view>
									<view class="text">台</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-echarts">
							<cover-view class="coverview"></cover-view>
							<uni-ec-canvas class="uni-canvas" force-use-old-canvas="true" id="uni-ec-canvas"
								ref="EQwork" canvas-id="uni-ec-canvas" :ec="ec">
							</uni-ec-canvas>
						</view>
						<view class="swiper-text">
							<view class="swipertitle">设备工作状态</view>
							<view class="swiperneiron">
								<view class="swiperview">
									<view class="text ydzero">运行:</view>
									<view class="number zero">{{EQworkoption.series[0].data[0].value}}</view>
									<view class="text">台</view>
								</view>
								<view class="swiperview">
									<view class="text ydhui">停机:</view>
									<view class="number hui">{{EQworkoption.series[0].data[1].value}}</view>
									<view class="text">台</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-echarts">
							<cover-view class="coverview"></cover-view>
							<uni-ec-canvas class="uni-canvas" force-use-old-canvas="true" id="uni-ec-canvas"
								ref="SNonline" canvas-id="uni-ec-canvas" :ec="ec">
							</uni-ec-canvas>
						</view>
						<view class="swiper-text">
							<view class="swipertitle">传感器在线状态</view>
							<view class="swiperneiron">
								<view class="swiperview">
									<view class="text ydzero">在线:</view>
									<view class="number zero">{{SNonlineoption.series[0].data[0].value}}</view>
									<view class="text">个</view>
								</view>
								<view class="swiperview">
									<view class="text ydhui">离线:</view>
									<view class="number hui">{{SNonlineoption.series[0].data[1].value}}</view>
									<view class="text">个</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-echarts">
							<cover-view class="coverview"></cover-view>
							<uni-ec-canvas class="uni-canvas" force-use-old-canvas="true" id="uni-ec-canvas"
								ref="SNwork" canvas-id="uni-ec-canvas" :ec="ec">
							</uni-ec-canvas>
						</view>
						<view class="swiper-text">
							<view class="swipertitle">传感器工作状态</view>
							<view class="swiperneiron">
								<view class="swiperview">
									<view class="text ydzero">运行:</view>
									<view class="number zero">{{SNworkoption.series[0].data[0].value}}</view>
									<view class="text">个</view>
								</view>
								<view class="swiperview">
									<view class="text ydlan">待机:</view>
									<view class="number lan">{{SNworkoption.series[0].data[1].value}}</view>
									<view class="text">个</view>
								</view>
								<view class="swiperview">
									<view class="text ydhui">休眠:</view>
									<view class="number hui">{{SNworkoption.series[0].data[2].value}}</view>
									<view class="text">个</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="grollcenter">
				<view class="hxview" @click="aotoabnormal(1)">
					<image src='../../static/img/tabbar/habnormal.png' class='png' mode='aspectFit'></image>
					<view class="pngtext one">{{abnormaldata.unusualCount}}</view>
					<view class="pngvalue one">一级报警</view>
				</view>
				<view class="hxview" @click="aotoabnormal(2)">
					<image src='../../static/img/tabbar/cabnormal.png' class='png' mode='aspectFit'></image>
					<view class="pngtext two">{{abnormaldata.warningCount}}</view>
					<view class="pngvalue two">二级报警</view>
				</view>
				<view class="hxview" @click="aotoabnormal(3)">
					<image src='../../static/img/tabbar/abnormal.png' class='png' mode='aspectFit'></image>
					<view class="pngtext three">{{abnormaldata.highRiskCount}}</view>
					<view class="pngvalue three">三级报警</view>
				</view>
			</view>
		</view>
		<view class="eqlist">
			<u-tabs :list="list" lineWidth="60" :scrollable='false' lineColor="#3c9cff" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="clicktab">
			</u-tabs>
			<view style="margin: 2%;" v-show="number==1?true:false">
				<u-search v-model="EQsearch" @search="searchEQ" shape="round" bgColor='#fff' borderColor='#c4c6c9'
					placeholderColor='#c4c6c9' :clearabled="true" :showAction="true" actionText="查询" @custom="searchEQ"
					input-align="left">
				</u-search>
			</view>
			<view v-show="number==1?true:false">
				<view v-for="(item,index) in equipmentList" :key="item.equipmentRealId"
					:class="[item.workingStatus==1?'eqbackyx':'epbacktj',item.healthStatus==2 ? 'one' : item.healthStatus==3? 'two' : item.healthStatus==4?'three': 'hei']"
					@longpress="editeq(item)">
					<uni-list :border='false'>
						<uni-list-item :clickable="true" @click="pointlist(item)">
							<template v-slot:header>
								<view class="slotbo">
									<view class="slottitle">{{item.name}}
									</view>
									<view class="slottext">{{item.description}}</view>
									<view class="slottext">
										最后检测于:{{item.collectedTime==''?'暂无':item.collectedTime}}</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<view class="jilulist" v-show="number==2?true:false">
				<uni-list :border='false'>
					<uni-list-item v-for="(item,index) in recordlist" :key="index">
						<template v-slot:header>
							<view style="word-wrap: break-word; width: 100%;" @click="gotoabnor(item)">
								<view class="hei" style="margin-bottom: 10rpx; font-size: 14px;">
									<text style="color: #005ecf;">{{item.equipmentName+' '}}</text>
									<text style="color: #288deb;">{{item.pointName+' '}}</text>
									<text>发生了一次</text>
									<text :class="item.healthStatus==4?'three':item.healthStatus==3?'two':'one'">
										{{item.healthStatus==4?'三级报警':item.healthStatus==3?'二级报警':'一级报警'}}
									</text>
								</view>
								<view class="hui" style="font-size: 12px;">
									{{item.relativeTime}}<text
										:class="item.healthStatus==4?'three':item.healthStatus==3?'two':'one'"
										style="float: right; font-size: 14px;">{{item.featureName}}</text>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<u-action-sheet :actions="eqinfolist" round="10" overlayOpacity='0.1' :description='eqinfodescription'
			:closeOnClickOverlay="true" @close="eqinfoshow = false" @select="selectClick" :title="eqinfotitle"
			:show="eqinfoshow"></u-action-sheet>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				mysNavConfig: {
					navPadding: true,
					bgColor: "#2979FF",
					isHome: true,
					navTitle: {
						text: "数据总览",
						color: "#ffffff",
						fontSize: "18px",
						fontWeight: "500",
					}
				},
				userinfo: '',
				PhoneInfo: '',
				ec: {
					lazyLoad: true, //是否懒加载
				},
				//设备健康状态
				EQhealthoption: {
					title: {
						text: "",
						subtext: "设备总数",
						left: "center",
						top: "35%",
						itemGap: 2,
						textStyle: {
							fontSize: 22,
							fontWeight: "bold"
						},
						subtextStyle: {
							fontSize: 14,
							fontWeight: "bold",
							color: '#303133'
						}
					},
					series: [{
						type: 'pie',
						radius: ['50%', '80%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						emphasis: {
							scale: false,
						},
						tooltip: {
							show: false,
						},
						labelLine: {
							show: false
						},
						data: ''
					}]
				},
				//设备工作状态
				EQworkoption: {
					title: {
						text: "",
						subtext: "设备总数",
						left: "center",
						top: "35%",
						itemGap: 2,
						textStyle: {
							fontSize: 22,
							fontWeight: "bold"
						},
						subtextStyle: {
							fontSize: 14,
							fontWeight: "bold",
							color: '#303133'
						}
					},
					series: [{
						type: 'pie',
						radius: ['50%', '80%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						emphasis: {
							scale: false,
						},
						tooltip: {
							show: false,
						},
						labelLine: {
							show: false
						},
						data: ''
					}]
				},
				//传感器在线状态
				SNonlineoption: {
					title: {
						text: "",
						subtext: "传感器总数",
						left: "center",
						top: "35%",
						itemGap: 2,
						textStyle: {
							fontSize: 22,
							fontWeight: "bold"
						},
						subtextStyle: {
							fontSize: 14,
							fontWeight: "bold",
							color: '#303133'
						}
					},
					series: [{
						type: 'pie',
						radius: ['50%', '80%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						emphasis: {
							scale: false,
						},
						tooltip: {
							show: false,
						},
						labelLine: {
							show: false
						},
						data: ''
					}]
				},
				// 传感器工作状态
				SNworkoption: {
					title: {
						text: "",
						subtext: "传感器总数",
						left: "center",
						top: "35%",
						itemGap: 2,
						textStyle: {
							fontSize: 22,
							fontWeight: "bold"
						},
						subtextStyle: {
							fontSize: 14,
							fontWeight: "bold",
							color: '#303133'
						}
					},
					series: [{
						type: 'pie',
						radius: ['50%', '80%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						emphasis: {
							scale: false,
						},
						tooltip: {
							show: false,
						},
						labelLine: {
							show: false
						},
						data: ''
					}]
				},
				number: 1,
				list: [{
					id: 1,
					name: '设备列表'
				}, {
					id: 2,
					name: '报警动态',
				}],
				EQsearch: '',
				abnormaldata: '',
				pageSize: 8,
				count: 0,
				pageIndex: 1,
				equipmentList: '', //设备列表
				recordlist: [],
				recordpage: 1,
				recordlimit: 20,
				timeRange: 30, //三十天
				eqinfoid: '',
				eqinfoass: '',
				eqinfotitle: '',
				eqinfodescription: '',
				eqinfolist: [{
					id: 1,
					name: '编辑设备信息',
					color: '#303133',
					fontSize: '16'
				}],
				eqinfoshow: false,
			};
		},
		onLoad() {
			this.PhoneInfo = this.$utils.GetPhoneInfo();
			this.userinfo = uni.getStorageSync('userinfo');
			//获取设备列表
			this.getequipmentlist();
			//获取报警动态列表
			this.getabnormallist();
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			//跳转报警列表
			gotoabnor(value) {
				uni.navigateTo({
					url: '/pages/equipment/abnormal?id=10' + '&eqid=' +
						value.equipmentRealId + '&time=' +
						value.absoluteTime + '&healid=' +
						value.healthStatus
				})
			},
			//获取报警动态
			getabnormallist() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookAbnormal.replace(
						"{userRealId}",
						this.userinfo.userRealId),
					data: {
						page: this.recordpage,
						limit: this.recordlimit,
						timeRange: this.timeRange,
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							for (let item of res.data.data) {
								this.recordlist.push(item);
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//获取数据总览
			getServerData() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				setTimeout(() => {
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_Dataoverview.replace(
							"{userRealId}",
							this.userinfo.userRealId),
						method: "GET",
						success: (res) => {
							if (res.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (res.data.code == 0) {
								this.abnormaldata = res.data.data.abnormalResult;
								this.EQhealthoption.title.text = res.data.data
									.equipmentHealthResult.normalCount + res
									.data.data
									.equipmentHealthResult.unusualCount + res.data.data
									.equipmentHealthResult.warningCount + res.data.data
									.equipmentHealthResult.highRiskCount;
								this.EQhealthoption.series[0].data = [{
										value: res.data.data.equipmentHealthResult.normalCount,
										itemStyle: {
											color: "#91CB74"
										}
									},
									{
										value: res.data.data.equipmentHealthResult.unusualCount,
										itemStyle: {
											color: "#FAC858"
										}
									},
									{
										value: res.data.data.equipmentHealthResult.warningCount,
										itemStyle: {
											color: "#FC8452"
										}
									},
									{
										value: res.data.data.equipmentHealthResult.highRiskCount,
										itemStyle: {
											color: "#EE6666"
										}
									},
									{
										value: 0,
										name: '',
										itemStyle: {
											color: '#ffffff'
										},
										label: {
											show: false
										},
										emphasis: {
											label: {
												show: false
											}
										}
									}
								];
								this.EQworkoption.title.text = res.data.data.equipmentWorkingResult
									.runningCount +
									res.data.data
									.equipmentWorkingResult.restingCount;
								this.EQworkoption.series[0].data = [{
										value: res.data.data.equipmentWorkingResult.runningCount,
										itemStyle: {
											color: "#91CB74"
										}
									},
									{
										value: res.data.data.equipmentWorkingResult.restingCount,
										itemStyle: {
											color: "#8f939c"
										}
									},
									{
										value: 0,
										name: '',
										itemStyle: {
											color: '#ffffff'
										},
										label: {
											show: false
										},
										emphasis: {
											label: {
												show: false
											}
										}
									}
								];
								this.SNonlineoption.title.text = res.data.data.deviceOnlineResult
									.onlineCount + res
									.data.data
									.deviceOnlineResult.offlineCount;
								this.SNonlineoption.series[0].data = [{
										value: res.data.data.deviceOnlineResult.onlineCount,
										itemStyle: {
											color: "#91CB74"
										}
									},
									{
										value: res.data.data.deviceOnlineResult.offlineCount,
										itemStyle: {
											color: "#8f939c"
										}
									},
									{
										value: 0,
										name: '',
										itemStyle: {
											color: '#ffffff'
										},
										label: {
											show: false
										},
										emphasis: {
											label: {
												show: false
											}
										}
									}
								];
								this.SNworkoption.title.text = res.data.data.deviceWorkingResult
									.runningCount + res
									.data.data
									.deviceWorkingResult.waitingCount + res.data.data
									.deviceWorkingResult.restingCount;
								this.SNworkoption.series[0].data = [{
										value: res.data.data.deviceWorkingResult.runningCount,
										itemStyle: {
											color: "#91CB74"
										}
									},
									{
										value: res.data.data.deviceWorkingResult.waitingCount,
										itemStyle: {
											color: "#1890FF"
										}
									},
									{
										value: res.data.data.deviceWorkingResult.restingCount,
										itemStyle: {
											color: "#8f939c"
										}
									},
									{
										value: 0,
										name: '',
										itemStyle: {
											color: '#ffffff'
										},
										label: {
											show: false
										},
										emphasis: {
											label: {
												show: false
											}
										}
									}
								];
								this.$refs.EQhealth.init(this.EQhealth)
								this.$refs.EQwork.init(this.EQwork)
								this.$refs.SNonline.init(this.SNonline)
								this.$refs.SNwork.init(this.SNwork)
							} else {
								this.$utils.showToast(this, res.data.msg, 'error');
							}
						},
						fail() {
							this.$utils.showToast(this, "加载失败！", 'error');
						},
						complete() {
							uni.hideLoading();
						}
					})
				}, 1000);
			},
			//点击横向列表
			clicktab(index) {
				this.number = index.id;
			},
			//点击设备列表跳转测点列表
			pointlist(value) {
				uni.navigateTo({
					url: '/pages/equipment/point?equipmentRealId=' + value.equipmentRealId
				});
			},
			//点击弹窗选项
			selectClick(index) {
				//如果id==1
				if (index.id == 1) {
					uni.navigateTo({
						url: '/pages/equipmentManage/editEquipment?equipmentRealId=' + this.eqinfoid +
							'&entrust=' + this.eqinfoass
					})
				}
			},
			//修改设备信息
			editeq(value) {
				this.eqinfotitle = value.name;
				this.eqinfodescription = value.description;
				this.eqinfoid = value.equipmentRealId;
				this.eqinfoass = value.assignFlag;
				this.eqinfoshow = true;
			},
			//获取设备列表
			getequipmentlist() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				//进入页面显示全部的设备(创建和授权)
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookEquipmentList.replace(
						"{userRealId}",
						this.userinfo.userRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
						Name: this.EQsearch,
						showCreated: 1,
						showAssigned: 1,
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.count = res.data.count
							this.equipmentList = res.data.data;
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//设备列表搜索
			searchEQ() {
				if (this.number == 1) {
					this.getequipmentlist();
				}
			},
			//跳转报警记录
			aotoabnormal(value) {
				uni.navigateTo({
					url: '/pages/equipment/abnormal?id=' + value
				})
			},
			//设备健康
			EQhealth(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.EQhealthoption)
				return chart
			},
			// 设备工作
			EQwork(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.EQworkoption)
				return chart
			},
			//传感器在线
			SNonline(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.SNonlineoption)
				return chart
			},
			//传感器工作
			SNwork(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.SNworkoption)
				return chart
			},
		},
		//下拉加载
		onReachBottom() {
			if (this.number == 1) { //设备列表
				if (this.count >= this.pageSize) {
					this.pageSize += 8;
					this.getequipmentlist();
				}
			} else { //报警动态
				var text = this.recordpage * 20;
				if (text <= this.recordlist.length) {
					this.recordpage += 1;
					this.getabnormallist();
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	//上方数据概况
	.gross {
		height: 40%;
		background-image: linear-gradient(to bottom, rgb(41, 121, 255), rgb(246, 246, 246));
	}

	//轮播图
	.swiper-box {
		width: 90%;
		margin: auto;
		height: 60%;
		border-radius: 15px;
		background-color: #fff;
		position: relative;
	}

	// 轮播图-左边趋势图部分
	.swiper-echarts {
		width: 50%;
		display: inline-block;
		height: 100%;
		position: relative;
	}

	//趋势图的遮罩(防止用户点击)
	.coverview {
		width: 100%;
		height: 100%;
		position: absolute; //绝对定位
		z-index: 10;
	}

	//趋势图
	.uni-canvas {
		width: 100%;
		height: 100%;
		position: absolute;
		display: block;
	}

	//轮播图-右边数据
	.swiper-text {
		display: inline-block;
		width: 50%;
		height: 100%;
		position: absolute;
	}

	//轮播图-右侧标题
	.swipertitle {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin: 10% 0% 5% 0%;
	}

	//标题下数据
	.swiperneiron {
		display: flex;
		flex-direction: column;
	}

	//每一行数据
	.swiperview {
		flex-grow: 1;
		text-align: center;
		margin: 2% 0%;
	}

	//name和单位
	.text {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
		color: #303133;
		flex-grow: 1;
		text-align: center;
	}

	//数字
	.number {
		width: 25%;
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		flex-grow: 1;
		text-align: center;
	}

	//报警记录
	.grollcenter {
		display: flex;
		width: 90%;
		margin: auto;
		height: 30%;
	}

	//一级,二级,三级
	.hxview {
		padding: 2%;
		flex-grow: 1;
		display: inline-block;
		margin: 2%;
		height: 100%;
		background-color: #fff;
		border-radius: 10px;
	}

	//报警数量
	.pngtext {
		display: inline-block;
		width: 48%;
		position: relative;
		top: -22%;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
	}

	//报警提示
	.pngvalue {
		position: relative;
		font-size: 15px;
		top: -10%;
		font-weight: 700;
		text-align: center;
	}

	//报警图片
	.png {
		display: inline-block;
		height: 70%;
		width: 48%;
		position: relative;
	}

	//横向列表
	.eqlist {
		width: 90%;
		height: 55%;
		margin: auto;
		margin-top: -5%;
	}

	//状态等级
	.hei {
		color: #303133;
	}

	.hui {
		color: #8f939c;
	}

	.lan {
		color: #1890FF;
	}

	.zero {
		//运行
		color: #91CB74;
	}

	.one {
		//一级报警
		color: #ebbb53;
	}

	.two {
		//二级报警
		color: #FC8452;
	}

	.three {
		//三级报警
		color: #EE6666;
	}

	.ydhui {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #8f939c;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydzero {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #91CB74;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydone {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #ebbb53;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydtwo {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #FC8452;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydthree {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #EE6666;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydlan {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #1890FF;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	//设备工作状态运行
	.eqbackyx {
		background-color: #fff;
		border-radius: 15px;
		overflow: hidden;
		margin: 2% 0%;
		border: 1px solid #94bcff;
	}

	//停机
	.epbacktj {
		border-radius: 15px;
		overflow: hidden;
		margin: 2% 0%;
		border: 1px solid #8f939c;
		background-color: #f2f5f9;
	}

	//list-header显示
	.slotbo {
		width: 100%;
		word-wrap: break-word;
	}

	//设备名称
	.slottitle {
		font-size: 15px;
		line-height: 22px;
	}

	//设备描述和时间
	.slottext {
		margin-top: 5rpx;
		font-size: 12px;
		line-height: 18px;
	}

	//报警动态
	.jilulist {
		margin-top: 2%;
		background-color: #ffffff;
		border-radius: 15px;
	}
</style>